import { Component, OnInit } from '@angular/core';
import {HideAirQualityDataChartsService} from "./hide-air-quality-data-charts.service";
import {MsgConstants} from "../../../constants/constants";
import {ResponseUtil} from "../../../util/response-util";
import {OneDialogService} from "../../../widgets/one-dialog/one-dialog.service";
import {MsgResult} from "../../../models/msg-result";

declare var $;
declare var echarts;
declare var moment;

@Component({
  selector: 'app-hide-air-quality-data-charts',
  templateUrl: './hide-air-quality-data-charts.component.html',
  styleUrls: ['./hide-air-quality-data-charts.component.css']
})
export class HideAirQualityDataChartsComponent implements OnInit {
  dataObj;config;checkCodeType;
  constructor(
    private HideAirQualityDataChartsService:HideAirQualityDataChartsService,
    private responseUtil :ResponseUtil,
    private dialogService: OneDialogService,
  ) { }

  ngOnInit() {
    this.initStyle();
    this.checkCodeType = "siteCodeType";
    this.initTimePicker();
    this.dataObj = {"queryCheckCode": $("#search-codes").val(), "startTime": $.trim($("#airQualityDate").val().split("至")[0]), "endTime": $.trim($("#airQualityDate").val().split("至")[1]), "tableName": $("#search-table").val(), "checkCodeType":this.checkCodeType, "qualityFactor": "AQI"};
    this.chartContentData(this.dataObj);
    this.initEvent();
  }
initStyle(){
    //echarts高度控制
  $("#airQualityDataCharts").css({"width":"100%","height":$(window.innerHeight)[0]-330+"px"});

  // 按钮点击
  $(".btn-group .btn").click(function () {
    $(this).addClass("active").siblings(".active").removeClass("active");
  });

  // 切换查询的T_DATA_REGION_AIR_数据表
  $("#regionCodeType").click(function () {
    var html = "";
    html += "<option value='T_DATA_REGION_AIR_DAY-2017'>T_DATA_REGION_AIR_DAY-2017</option>";
    html += "<option value='T_DATA_REGION_AIR_HOUR'>T_DATA_REGION_AIR_HOUR</option>";
    html += "<option value='T_DATA_REGION_AIR_HOUR-2017'>T_DATA_REGION_AIR_HOUR-2017</option>";
    html += "<option value='T_DATA_REGION_AIR_MONTH-2017'>T_DATA_REGION_AIR_MONTH-2017</option>";
    html += "<option value='T_DATA_REGION_AIR_WEEK-2017'>T_DATA_REGION_AIR_WEEK-2017</option>";
    html += "<option value='T_DATA_REGION_AIR_YEAR-2017'>T_DATA_REGION_AIR_YEAR-2017</option>";
    $("#search-table").html(html);
  });
  // 切换查询的T_DATA_AIR_数据表
  $("#siteCodeType").click(function () {
    var html = "";
    html += "<option value='T_DATA_AIR_DAY-2017'>T_DATA_AIR_DAY-2017</option>";
    html += "<option value='T_DATA_AIR_HOUR'>T_DATA_AIR_HOUR</option>";
    html += "<option value='T_DATA_AIR_HOUR-2017'>T_DATA_AIR_HOUR-2017</option>";
    html += "<option value='T_DATA_AIR_MIN'>T_DATA_AIR_MIN</option>";
    html += "<option value='T_DATA_AIR_MIN-2017'>T_DATA_AIR_MIN-2017</option>";
    html += "<option value='T_DATA_AIR_MONTH-2017'>T_DATA_AIR_MONTH-2017</option>";
    html += "<option value='T_DATA_AIR_WEEK-2017'>T_DATA_AIR_WEEK-2017</option>";
    html += "<option value='T_DATA_AIR_YEAR-2017'>T_DATA_AIR_YEAR-2017</option>";
    $("#search-table").html(html);
  });

  };
  //图表数据
  chartContentData(obj){
    let dataId = $(".timeBtn").find(".active").attr("id");
      this.HideAirQualityDataChartsService.getHideAirQualitySiteChartsData(obj).subscribe(
        result => this.responseUtil.success(result,this.tableContentDataResult),
        message => this.responseUtil.error(message)
      );
  }
  private tableContentDataResult = (result: MsgResult) =>{
    if (result && result.code == MsgConstants.MSG_CODE_OK) {
      this.tableContentDataTree(result.data);
    }
    if (result && result.code != MsgConstants.MSG_CODE_OK) {
      this.dialogService.info(result.message);
    }
  }
  private tableContentDataTree(data){
    if(data == null){
      $(".one-data-loadState").hide();
      let data = [];
      this.chartRender(data);
      $(".fixed-table-body .table").removeClass("fixed");
      $(".no-records-found>td").html("暂无数据");
    }else{
      console.log("表格数据加载成功");
      console.log(data);
      this.chartRender(data);
      $(".fixed-table-body .table").addClass("fixed");
      $(".one-data-loadState").hide();
    }
  }

  //初始化时间控件
initTimePicker(){
  this.config = {
  timePicker: true,
  timePickerIncrement: 5,
  timePicker24Hour: true,
  locale: {
    format: "YYYY-MM-DD HH:mm:ss",
    separator: " 至 ",
    applyLabel: '确定',
    cancelLabel: '取消',
    fromLabel: '从',
    toLabel: '到',
    weekLabel: 'W',
    customRangeLabel: 'Custom Range',
    daysOfWeek: ["日", "一", "二", "三", "四", "五", "六"],
    monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
    firstDay: 1
  },
  startDate: moment().subtract(1,"d").format("YYYY-MM-DD HH:mm:ss"),
  endDate: moment().format("YYYY-MM-DD HH:mm:ss"),
  maxDate: moment().format("YYYY-MM-DD HH:mm:ss")

};

//初始化日期插件
  $("#airQualityDate").daterangepicker(this.config);

}
//图表
  chartRender(chartList) {
  var compareChart = echarts.init(document.getElementById('airQualityDataCharts'));
  //图表配置信息
  var option = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data:chartList.siteNameList
    },
    xAxis: {
      type: 'category',
      nameGap:"20",
      name: "日期",
      nameLocation:"start",
      boundaryGap: false,
      data: chartList.timeList[0]
    },
    yAxis: {
      name: "指数",
      type: 'value'
    },
    series: []
  };
  //series中的内容
  $.each(chartList.siteNameList,function(index,nameList){
    option.series.push({"type":"line","smooth":true,"name":nameList,"data":chartList.dataList[index]})
  });
  console.log(option);
  compareChart.setOption(option);
}

dateChange() {
  let queryCheckCode = $("#search-codes").val();
  let tableName = $("#search-table").val();
  let startTime = $.trim($("#airQualityDate").val().split("至")[0]);
  let endTime = $.trim($("#airQualityDate").val().split("至")[1]);
  let qualityFactor = $(".factor").find(".active").attr("id");
  let checkCodeType = $(".timeBtn").find(".active").attr("id");
  this.dataObj = {"queryCheckCode": queryCheckCode, "startTime": startTime, "endTime": endTime, "tableName": tableName, "checkCodeType":checkCodeType, "qualityFactor": qualityFactor};
  this.chartContentData(this.dataObj);
}

initEvent(){
  $(".search").click(function () {
    this.dateChange();
  }.bind(this));
}



}
